<template>
  <Dialog :dialogVisible="dialogVisible" :title="dialogProps.title" @close="close">
    <BasicForm
      :formConifg="formConifg"
      :formData="formData"
      @close="close"
      @submit="submit"
    ></BasicForm>
  </Dialog>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { Dialog } from '@com/Dialog/index';
import { BasicForm } from '@com/Form/index';

const props = defineProps({
  formConifg: {
    // 表单配置项
    type: Array,
    default: () => [],
  },
  dialogProps: {
    type: Object,
    default: {
      dialogVisible: false,
      title: '弹窗标题',
      formData: {},
      type: 'add',
    },
  },
});
const emit = defineEmits(['close', 'submit']);

const formData = ref({});

const dialogVisible = ref(false);
watch(
  () => props.dialogProps.dialogVisible,
  (newVal) => {
    if (newVal !== dialogVisible.value) {
      dialogVisible.value = newVal;
    }
    if (newVal) {
      formData.value = props.dialogProps.formData;
    }
  },
);

const close = () => {
  formData.value = {};
  dialogVisible.value = false;
  emit('close');
};

const submit = (formData: object) => {
  emit('submit', formData);
};
</script>
